<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申报表</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.css">
    <style>
        table {
            font-size: 0.87rem;
        }
    </style>
</head>

<body>
    <div class="container mt-2">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#amendsTempDisplay"
                    aria-selected="true">申报表查询</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#amendsTempCheck"
                    aria-selected="false">申报表维护</button>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="amendsTempDisplay">
                <div class="row mx-0 px-0 mt-2">
                    <div class="col-sm-5 col-lg-4 col-xl-3 px-0 pe-sm-2 mb-2">
                        <div class="input-group input-group-sm ">
                            <span class="input-group-text">起始日期</span>
                            <input type="date" name="" id="" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-5 col-lg-4 col-xl-3 px-0 pe-sm-2 mb-2">
                        <div class="input-group input-group-sm ">
                            <span class="input-group-text">截至日期</span>
                            <input type="date" name="" id="" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-2 col-lg-4 col-xl-3 px-0 mb-2">
                        <a href="#" class="btn btn-primary d-block d-md-inline-block btn-sm" id="searchBtn">检索</a>
                    </div>
                    <div class="table-responsive px-0">
                        <table class="table table-striped table-hover table-sm table-bordered" style="min-width:900px;">
                            <thead>
                                <tr>
                                    <th style="width:125px;">物料编码</th>
                                    <th>物料图号</th>
                                    <th style="width:200px ;">物料名称</th>
                                    <th style="width:80px;" class="text-end">单价</th>
                                    <th style="width:90px;">供应商编码</th>
                                    <th style="width:200px;">供应商名称</th>
                                </tr>
                            </thead>
                            <tbody id="itemList">
                                <!-- <tr>
                                    <td>
                                        <div class="dropdown">
                                            <a class="btn btn-defualt btn-sm dropdown-toggle p-0 border-0"
                                                data-bs-toggle="dropdown">
                                                240100350519
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">编辑</a></li>
                                                <li><a class="dropdown-item" href="#">删除</a></li>
                                                <li><a class="dropdown-item" href="#">更多...</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>L6R.010100EBCP-1</td>
                                    <td>气缸盖机械部件</td>
                                    <td>1</td>
                                    <td>100345</td>
                                    <td>麻屯铸造厂</td>
                                </tr> -->
                            </tbody>
                            <tfoot id="footSum"></tfoot>
                        </table>
                    </div>
                </div>

            </div>
            <div class="tab-pane mt-2" id="amendsTempCheck">
                <!-- 普通模态框 -->
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">
                    普通模态框
                </button>
                <div class="modal fade" id="myModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                中心地区内容，提交数据成功！
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <br><br>
                <!-- 静态模态框 -->
                <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal"
                    data-bs-target="#staticBackdrop">
                    静态模态框
                </button>
                <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body bg-success">
                                只能点击关闭按钮才能关闭模态框！
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Understood</button>
                            </div>
                        </div>
                    </div>
                </div>
                <br><br>
                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal"
                    data-bs-target="#dialogScrollable">
                    滚动模态框
                </button>
                <!-- 滚动模态框 -->
                <div class="modal fade" id="dialogScrollable" tabindex="-1">
                    <div class="modal-dialog modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="dialogScrollableLabel">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi beatae ipsum
                                aspernatur est quo labore tempore sed rem cumque voluptatibus assumenda, reiciendis
                                dolor iure nobis sequi eos fuga voluptatem. Cupiditate doloremque quam dicta modi at.
                                Repellat cupiditate nisi architecto distinctio inventore animi blanditiis iste quidem
                                veniam quas autem magni explicabo reprehenderit beatae nemo deserunt consectetur
                                voluptatum dolorum nostrum assumenda temporibus unde soluta, possimus eligendi. Sapiente
                                asperiores rerum nisi quam est itaque mollitia amet nihil distinctio, unde cum
                                praesentium porro accusantium ipsum fugit vitae vero minus quod ea hic eveniet facere
                                officia. Illo a alias perspiciatis tempora dolores! Minus, veniam tempore!
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore aperiam incidunt, ipsam
                                nostrum cupiditate fuga? Voluptas dignissimos repudiandae inventore magni laboriosam qui
                                necessitatibus unde saepe totam iusto pariatur iure sed deserunt facilis, accusantium,
                                enim optio minus. Mollitia vitae quas laboriosam facilis cum ex, officia culpa quae
                                eligendi similique ratione modi repellat optio hic labore eius cumque dolorem magni
                                corporis, dignissimos accusamus. Placeat quis illum mollitia, incidunt quasi autem. Quia
                                quasi dolor magnam dolorem pariatur suscipit, obcaecati libero totam aut nulla!
                                Laudantium quae maxime quis aperiam dolorem! Voluptatem recusandae cumque, veritatis
                                quis nam a assumenda, explicabo voluptatum maxime illum animi, sint hic saepe! Vel
                                obcaecati unde hic explicabo repudiandae non vitae nostrum possimus corrupti tempore
                                alias cumque quas iusto vero itaque, officia, cum ut ducimus ea modi similique nemo quo
                                consequatur! Dignissimos enim, consequatur maxime delectus, temporibus illum eveniet
                                tempora adipisci aspernatur quia soluta voluptate totam veritatis quisquam illo iste qui
                                vitae esse eius ducimus perferendis accusantium iusto itaque. Sunt animi quidem
                                laboriosam tempora rem adipisci voluptas voluptatem dolorum aliquid consequatur error
                                esse ipsa facilis perspiciatis iure dolor, optio itaque assumenda nostrum alias
                                recusandae similique iste consequuntur nihil. Omnis expedita cumque soluta iste.
                                Repudiandae qui accusamus commodi eos rem quo natus?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <br><br>
                <!-- 传值模态框 -->
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                    data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
                <br><br>
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                    data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
                <br><br>
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                    data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for
                    @getbootstrap</button>

                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="mb-3">
                                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                                        <input type="text" class="form-control" id="recipient-name">
                                    </div>
                                    <div class="mb-3">
                                        <label for="message-text" class="col-form-label">Message:</label>
                                        <textarea class="form-control" id="message-text"></textarea>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Send message</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="Bootstrap/js/bootstrap.bundle.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        // console.log
        // 检索按钮
        $("#searchBtn").click(function () {
            $.ajax({
                type: 'post',
                url: 'http://wp.jsfw.net/ytobs/ajax/itemDisplay.php',
                dataType: 'jsonp',
                jsonp: "jsoncallback",
                success: function (data) {
                    $("#itemList").empty();
                    $("#footSum").empty();
                    if (data.length > 0) {
                        data.forEach(element => {
                            let { ItemID, Blueprint, ItemName, Price, SupplyID, SupplyName } = element;
                            $("#itemList").append(`<tr><td><div class='dropdown'><a class='btn btn-defualt btn-sm dropdown-toggle p-0 border-0' data-bs-toggle='dropdown'>${ItemID}</a>
                                <ul class='dropdown-menu'>
                                    <li><a class='dropdown-item' onclick='editRow(${ItemID})'>编辑</a></li>
                                    <li><a class='dropdown-item text-danger' >删除</a></li>
                                    <li><a class='dropdown-item' >更多...</a></li>
                                </ul></div></td>
                                <td>${Blueprint}</td>
                                <td>${ItemName}</td>
                                <td class='text-end'>${Price}</td>
                                <td>${SupplyID}</td>
                                <td>${SupplyName}</td>
                            </tr>`);
                        });
                        $("#footSum").append(`<tr><td><strong>合计：${data.length} 行</strong></td><td colspan='5'></td></tr>`)
                    }
                },
                error: function () {
                    alert('Ajax获取数据失败!');
                }
            });
        })
        // 物料编码下拉事件
        function editRow(itemID) {
            alert(itemID);
        }
        // 模态框传值
        var exampleModal = document.getElementById('exampleModal')
        exampleModal.addEventListener('show.bs.modal', function (event) {
            // Button that triggered the modal
            var button = event.relatedTarget
            // Extract info from data-bs-* attributes
            var recipient = button.getAttribute('data-bs-whatever')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            // Update the modal's content.
            var modalTitle = exampleModal.querySelector('.modal-title')
            var modalBodyInput = exampleModal.querySelector('.modal-body input')

            modalTitle.textContent = 'New message to ' + recipient
            modalBodyInput.value = recipient
        })
    </script>
</body>

</html>